<template>
  <main class="content-child">
    <h2>alert组件</h2>
    <right style="display: flex;
    flex-wrap: wrap;
    justify-content: space-between;" :data="data"></right>
  </main>
</template>
<script>
import Right from '../components/Right';
export default {
  name: "Alert",
   components: {
    Right
  },
  data() {
    return {
      msg: [{
        name:'123'
      }],
    data:[{
      name: '样式一',
      time: '0.5',
      img:'../../static/images/alert/1.png',
      code: `
      import { AlertController } from 'ionic-angular';
      presentConfirm() {
        let alert = this.alertCtrl.create({
          title: '标题',
          message: '需要提示的一些具体内容',
          buttons: [
            {
              text: '取消',
              role: 'cancel',
              handler: () => {
                console.log('取消');
              }
            },
            {
              text: '确认',
              handler: () => {
                console.log('确认');
              }
            }
          ]
        });
        alert.present();
      }`
    }, {
      name: '样式二',
      time: '0.5',
      img:'../../static/images/alert/2.png',
      code: `
        import { AlertController } from 'ionic-angular';
        constructor(private alertCtrl: AlertController) {}
        presentAlert() {
          let alert = this.alertCtrl.create({
            title: '标题',
            subTitle: '需要提示的具体内容',
            buttons: ['确认']
          });
          alert.present();
        }`
      }, {
      name: '样式三',
      time: '0.5',
      img:'../../static/images/alert/3.png',
      code: `
        import { AlertController } from 'ionic-angular';
        export class MyPage {
        constructor(public alertCtrl: AlertController) { }
          showPrompt() {
            const prompt = this.alertCtrl.create({
              title: 'Login',
              message: "Enter a name for this new album you're so keen on adding",
              inputs: [
                {
                  name: 'title',
                  placeholder: 'Title'
                },
              ],
              buttons: [
                {
                  text: 'Cancel',
                  handler: data => {
                    console.log('Cancel clicked');
                  }
                },
                {
                  text: 'Save',
                  handler: data => {
                    console.log('Saved clicked');
                  }
                }
              ]
            });
            prompt.present();
          }
        }`
      }, {
      name: '样式四',
      time: '1',
      img:'../../static/images/alert/4.png',
      code: `
        import { AlertController } from 'ionic-angular';
        export class MyPage {
        constructor(public alertCtrl: AlertController) { }

          showRadio() {
            let alert = this.alertCtrl.create();
            alert.setTitle('单选alert');

            alert.addInput({
              type: 'radio',
              label: 'Blue',
              value: 'blue',
              checked: true
            });

            alert.addButton('取消');
            alert.addButton({
              text: '确认',
              handler: data => {
              }
            });
            alert.present();
          }
        }`
      }, {
      name: '样式四',
      time: '1',
      img:'../../static/images/alert/5.png',
      code: `
        import { AlertController } from 'ionic-angular';
        export class MyPage {
        constructor(public alertCtrl: AlertController) { }
          showCheckbox() {
            let alert = this.alertCtrl.create();
            alert.setTitle('多选alert');

            alert.addInput({
              type: 'checkbox',
              label: '选项一',
              value: 'value1',
              checked: true
            });

            alert.addInput({
              type: 'checkbox',
              label: '选项二',
              value: 'value2'
            });

            alert.addButton('取消');
            alert.addButton({
              text: '确认',
              handler: data => {

              }
            });
            alert.present();
          }
        }`
      }
    ]}
  },
};
</script>
<style scoped lang="less">
.content-child {
  text-align: left;
  width: 800px;
}
.right {
  padding-left: 1rem;
}
</style>
